<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 徽章和头像组件示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
</head>
<body>
  <div class="container">
    <h1 class="title title-large">徽章和头像组件示例</h1>
    
    <!-- 徽章组件 -->
    <div class="example-section">
      <h2 class="example-section-title">徽章组件</h2>
      
      <div class="example-group">
        <div class="example-item">
          <span class="badge">1</span>
          <span class="text text-caption text-tertiary">基础徽章</span>
        </div>
        <div class="example-item">
          <span class="badge badge-primary">主要</span>
          <span class="text text-caption text-tertiary">主要徽章</span>
        </div>
        <div class="example-item">
          <span class="badge badge-success">成功</span>
          <span class="text text-caption text-tertiary">成功徽章</span>
        </div>
        <div class="example-item">
          <span class="badge badge-warning">警告</span>
          <span class="text text-caption text-tertiary">警告徽章</span>
        </div>
        <div class="example-item">
          <span class="badge badge-danger">危险</span>
          <span class="text text-caption text-tertiary">危险徽章</span>
        </div>
        <div class="example-item">
          <span class="badge badge-dot"></span>
          <span class="text text-caption text-tertiary">点状徽章</span>
        </div>
      </div>
      
      <h3 class="example-subtitle">徽章尺寸</h3>
      <div class="example-group">
        <div class="example-item">
          <span class="badge badge-small">小</span>
          <span class="text text-caption text-tertiary">小尺寸</span>
        </div>
        <div class="example-item">
          <span class="badge">默认</span>
          <span class="text text-caption text-tertiary">默认尺寸</span>
        </div>
        <div class="example-item">
          <span class="badge badge-large">大</span>
          <span class="text text-caption text-tertiary">大尺寸</span>
        </div>
      </div>
      
      <h3 class="example-subtitle">带徽章的按钮</h3>
      <div class="example-group">
        <div class="badge-wrapper">
          <button class="button button-secondary">
            <svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
            </svg>
            消息
          </button>
          <span class="badge badge-danger">5</span>
        </div>
        <div class="badge-wrapper">
          <button class="button button-secondary">
            <svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
            用户
          </button>
          <span class="badge badge-dot"></span>
        </div>
      </div>
    </div>
    
    <!-- 头像组件 -->
    <div class="example-section">
      <h2 class="example-section-title">头像组件</h2>
      
      <h3 class="example-subtitle">头像尺寸</h3>
      <div class="example-group">
        <div class="example-item">
          <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle fill='%230A59F7' cx='20' cy='20' r='20'/%3E%3Ctext fill='white' font-size='20' x='50%25' y='50%25' text-anchor='middle' dy='.3em'%3EA%3C/text%3E%3C/svg%3E" 
               alt="Avatar" class="avatar avatar-small">
          <span class="text text-caption text-tertiary">小尺寸</span>
        </div>
        <div class="example-item">
          <div class="avatar avatar-medium">B</div>
          <span class="text text-caption text-tertiary">默认尺寸</span>
        </div>
        <div class="example-item">
          <div class="avatar avatar-large">C</div>
          <span class="text text-caption text-tertiary">大尺寸</span>
        </div>
        <div class="example-item">
          <div class="avatar avatar-xlarge">D</div>
          <span class="text text-caption text-tertiary">超大尺寸</span>
        </div>
      </div>
      
      <h3 class="example-subtitle">头像形状</h3>
      <div class="example-group">
        <div class="example-item">
          <div class="avatar">圆</div>
          <span class="text text-caption text-tertiary">圆形（默认）</span>
        </div>
        <div class="example-item">
          <div class="avatar avatar-square">方</div>
          <span class="text text-caption text-tertiary">方形</span>
        </div>
      </div>
      
      <h3 class="example-subtitle">头像状态</h3>
      <div class="example-group">
        <div class="example-item">
          <div class="avatar">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle fill='%2364bb5c' cx='20' cy='20' r='20'/%3E%3Ctext fill='white' font-size='20' x='50%25' y='50%25' text-anchor='middle' dy='.3em'%3E在线%3C/text%3E%3C/svg%3E" 
                 alt="Avatar">
            <div class="avatar-status"></div>
          </div>
          <span class="text text-caption text-tertiary">在线</span>
        </div>
        <div class="example-item">
          <div class="avatar">
            <div class="avatar-status avatar-status-away"></div>
          </div>
          <span class="text text-caption text-tertiary">离开</span>
        </div>
        <div class="example-item">
          <div class="avatar">
            <div class="avatar-status avatar-status-busy"></div>
          </div>
          <span class="text text-caption text-tertiary">忙碌</span>
        </div>
        <div class="example-item">
          <div class="avatar">
            <div class="avatar-status avatar-status-offline"></div>
          </div>
          <span class="text text-caption text-tertiary">离线</span>
        </div>
      </div>
      
      <h3 class="example-subtitle">头像组</h3>
      <div class="example-group">
        <div class="avatar-group">
          <div class="avatar">A</div>
          <div class="avatar">B</div>
          <div class="avatar">C</div>
          <div class="avatar">D</div>
        </div>
      </div>
      
      <div class="demo-group mt-medium">
        <div class="avatar-group avatar-group-small">
          <div class="avatar avatar-small">1</div>
          <div class="avatar avatar-small">2</div>
          <div class="avatar avatar-small">3</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

